$(function () {

    var arr = [];
    //console.log($(".ins"));


    //11.按键增加表格元素
    /* $(".btn").on("click",function() {
         //遍历ins数组
         $.each($(".ins"),function (i,d) {
             arr[i] = $(d).val();
         });
         //console.log(arr);
             //把新创建的元素放在table的最后面
             $(".tab").append("<tr><td><input type='checkbox' class='ck'></td><td>"+arr[0]+"</td><td>"+arr[1]+"</td><td class='danjia'>"+arr[2]+"</td><td><a href='javascript:;' class='reduce'>-</a><input type='text' class='number' value='"+arr[3]+"'><a href='javascript:;' class='add'>+</a></td><td>"+arr[4]+"</td><td class='del'><a href='javascript:;'>删除</a></td></tr>");

     });*/

//事件委派型 添加新数据
    $(".box").on("click",".btn",function(){
        console.log($(this));
        //console.log($(this).siblings(".id"));
        $(this).siblings(".tab").append("<tr>" +
            "<td><input type='checkbox' class='ck'></td>" +
            "<td>"+$(this).siblings(".id").val()+"</td>" +
            "<td>"+$(this).siblings(".name").val()+"</td>" +
            "<td>"+$(this).siblings(".phone").val()+"</td>"+
            "<td>"+$(this).siblings(".address").val()+"</td>"+
            " <td class=\"del\"><a href=\"javascript:;\">删除</a><span>/<a href=\"javascript:;\">更新</a></span></td>"+
            "</tr>"
        );
        getSum();
    });



    //1.全选 change
    $(".all").change(function () {
        //把全选框的check值赋给全部小ck


        //获取原有属性 jq对象.prop("属性名","属性值");
        //获取自定义属性 .jq对象.attr("属性名","属性值");
        //自定义属性即添加原来没有的属性

        //如 <input index="1" type="text"> index并不是原有属性
        $(".ck").prop("checked",$(".all").prop("checked"));


        //10. 加背景颜色
        if ($(".all").prop("checked")){//全选框被选中，全部加背景颜色
            $(".ck").parent().parent().addClass("active");
        }else {
            $(".ck").parent().parent().removeClass("active");
        }


    });//prop() 方法设置或返回被选元素的属性和值。

    //当该方法用于返回属性值时，则返回第一个匹配元素的值。

//当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

    //2.根据全部小ck的check值判断全选框的check值

    $(".ck").change(function () {
        console.log($(".ck:checked"));//遍历所有的ck的check属性
        // 如果某一ck的check值为true，放入伪数组中
        if ($(".ck:checked").length===($(".ck").length)) {
            //所以，根据伪数组的数组长度便可知道全部小ck的check值的情况
            $(".all").prop("checked",true);
        }else {
            $(".all").prop("checked",false);
        }

        //若单行被选中，加背景颜色
        if($(this).prop("checked")){
            $(this).parent().parent().addClass("active");
        }else {
            $(this).parent().parent().removeClass("active");
        }

    });


    getSum();//先调用一遍，计算目前的学生人数总和

//6.计算学生人数总和
    function getSum() {
        var count = 0;//总数
        //获取学生总数，除了输入框的
        console.log($(".id").length);
        count = $(".id").length - 1;
        //打印结果
        $(".amount_sum em").text(count);
    }



    //7.删除当前的行 事件委派
    $(".tab").on("click",".del",function () {
        $(this).parent().remove();
        getSum();
    });

    //8.删除选中的学生
    $(".box").on("click",".delRow",function () {
        $(".ck:checked").parent().parent().remove();
        getSum();
    });

    //9.删除所有学生
    $(".delAll").click(function () {
        $("tbody").empty();//删除自身所有子元素
        getSum();
    });

//10.测试
    /*console.log($("#test").val());
    console.log(parseFloat($("#test").val().slice(1)));*/


})